import React, { useState, useEffect  } from 'react'
import axios from 'axios';
import './Home.scss'

import {
    NotificationOutlined,
    AppstoreAddOutlined,
    AlertOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    HomeOutlined,
    GithubOutlined,
    PaperClipOutlined,
    BarsOutlined,
    EditOutlined,
    FontSizeOutlined,
    createFromIconfontCN 
} from '@ant-design/icons';
import { useNavigate, Outlet } from 'react-router-dom'
import { Button, Menu, Layout, Dropdown, Space, Avatar } from 'antd';
const { Header, Sider, Content } = Layout
const IconFont = createFromIconfontCN({
    scriptUrl: [
      '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
      // icon-javascript, icon-java, icon-shoppingcart (overridden)
      '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
    ],
  });
export default function Home() {
    // 将这些数据使用mobx统一管理 但是不会  于是存在本地吧
function getitem({label,key,icon,children}) {
    let e = []
    if(children){
        // getitem(children)
        for(let i =0;i<children.length;i++){
            e.push(getitem(children[i]))
        }
    }
    return {
        label,
        key,
        icon :  <IconFont type="icon-python" />,
        children : e
    }
}
    const navigate = useNavigate()
    const [items, setitems] = useState([])
    useEffect(() => {
        let token = localStorage.getItem('token')
        if (token) {
            // 用户已经登录,携带token发送请求 ,判断用户类型
            axios.post('/items',{token}).then((res)=>{
                if(res.data.code === 200){
                    // setitems(res.data.data)
                    console.log(res.data.data);
                    // console.log(getitem(res.data.data[0]));
                    let end = []
                    for(let i = 0 ; i < res.data.data.length ; i++){
                        end.push(getitem(res.data.data[i]))
                    }
                    console.log(end);
                    setitems(end)
                }
            })
        } else {
            navigate('/login')
            //用户未登录
        }
    },[])
    // 这里的数据是后台返回的数据
    const lineitem = [
        {
            key: '1',
            type: 'group',
            label: '用户设置',
            // disabled : true,
            children: [
                {
                    key: '11',
                    label: '个人设置'
                },
                {
                    key: '12',
                    label: '用户设置'
                }
            ]
        },
        {
            key: '2',
            danger: true,
            label: '退出登陆',
        },
    ]
    const [collapsed, setcollapsed] = useState(false)
    const linkClick = function (e) {
        //这就是我们需要的目标路径
        navigate(e.key)
    }
    
    return (
        <div >
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed} style={{ height: '100vh' }}>
                    <div className='title-style'><GithubOutlined className='titleclass' /></div>
                    <Menu
                        theme="dark"
                        // defaultSelectedKeys={['/home']}
                        defaultOpenKeys={['2']}
                        mode="inline"
                        items={items}
                        onClick={linkClick}
                    ></Menu>
                </Sider>
                <Layout>
                    <Header style={{
                        padding: '0 20px',
                        backgroundColor: 'white',
                        display: 'flex',
                        justifyContent: 'space-between',
                    }}>
                        <div>
                            <Button
                                ghost
                                type="ghost "
                                style={{ marginBottom: 16 }}
                                onClick={() => {
                                    setcollapsed(!collapsed)
                                }}
                            >
                                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            </Button>
                        </div>
                        <div>
                            <Dropdown
                                menu={{
                                    // 这里使用的是items 来进行的一个操作  不能使用别的参数,必须使用这个参数
                                    items: lineitem
                                }}
                                placement="bottomLeft"
                            >
                                <Space>
                                    <Avatar style={{ cursor: 'pointer' }} size="large" src={"https://tupian.qqw21.com/article/UploadPic/2020-4/20204820574777062.jpg"} />
                                </Space>
                            </Dropdown>
                        </div>
                    </Header>

                    <Content >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}
